<template>
    <div>
        <div id="container">
        </div>
        <div>
            <ul>
                <li v-for="park in parkArray" :key="park.parkBte">
                    停靠港：{{ park.portname_cn }} -
                    港口停留时间: {{ park.stayinport }}小时,
                    码头停留时间: {{ park.stayinterminal }}小时,
                    到达港口时间: {{ park.ata }},
                    到达码头(靠泊)时间: {{ park.atb }},
                    离开港口时间: {{ park.atd }}
                </li>
            </ul>
        </div>
    </div>

</template>
 
<script>
//引入缺德地图
import AMapLoader from '@amap/amap-jsapi-loader'
window._AMapSecurityConfig = {
    securityJsCode: 'a88f3af7d3ad10ad6157191f40b02a6a'  //你的安全密钥
}
export default {
    data() {
        return {
            map: null,
            LabelsData: [],
            pi: 3.1415926535897932384626,
            a: 6378245.0,
            ee: 0.00669342162296594323
        }
    },
    props: {
        trackArray: { // 这个名称需要与父组件中绑定的名称匹配
            type: Array, // 根据你的数据类型定义，这里是Object
            required: true // 如果这个数据是必须的，可以设置为true
        },
        parkArray: {
            type: Array, // 根据你的数据类型定义，这里是Object
            required: false // 如果这个数据是必须的，可以设置为true
        }
    },
    mounted() {
        this.addtoLabelsData(this.trackArray)
        //DOM初始化完成进行地图初始化
        this.initMap()
    },
    methods: {
        initMap() {
            let load = AMapLoader.load({
                key: "30a65aef7b5160daa39f800d9ae8c185",             // 申请好的Web端开发者Key，首次调用 load 时必填
                version: "2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                plugins: [''],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
            }).then((AMap) => {
                var style = {
                    url: "https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png", //图标地址
                    size: new AMap.Size(11, 11), //图标大小
                    anchor: new AMap.Pixel(5, 5), //图标显示位置偏移量，基准点为图标左上角
                };
                let map = new AMap.Map("container", {
                    zoom: 10, //地图级别
                    center: this.center, //地图中心点
                    // mapStyle: "amap://styles/whitesmoke", //设置地图的显示样式
                    viewMode: "2D", //设置地图模式
                    WebGLParams: {
                        preserveDrawingBuffer: true
                    }
                });
                var massMarks = new AMap.MassMarks(this.LabelsData, {
                    zIndex: 5, //海量点图层叠加的顺序
                    zooms: [3, 19], //在指定地图缩放级别范围内展示海量点图层
                    style: style, //设置样式对象
                });
                massMarks.setMap(map);
            }).catch(e => {
                console.log(e);
            })
            console.log(load)
        },
        addtoLabelsData(row) {
            console.log(row)
            this.LabelsData = row.map((value, index) => {
                // 注意：原始数据中的经纬度字段名应与实际数据对应，您提供的是"lat"和"lon"，但代码中用了"lat"和"lng"，请根据实际情况调整。
                const latDecimal = parseFloat(value.lat) / 1000000.0;
                const lonDecimal = parseFloat(value.lon) / 1000000.0;
                // 格式化经纬度，保留6位小数
                const formattedLat = latDecimal.toFixed(6);
                const formattedLon = lonDecimal.toFixed(6);
                return {
                    name: `index${index}`,
                    lnglat: this.wgs84togcj02(formattedLon, formattedLat),
                };
            });
            console.log("LabelsData", this.LabelsData);
            // 确保LabelsData至少有一项数据再进行操作
            if (this.LabelsData.length > 0) {
                // 获取第一组数据的经纬度作为center
                const firstItem = this.LabelsData[0].lnglat;
                this.center = firstItem; // 或者使用解构赋值: this.center = [...firstItem];
            }
        },
        wgs84togcj02(lng, lat) {
            var lat = +lat
            var lng = +lng
            if (this.outOfChina(lng, lat)) {
                return [lng, lat]
            } else {
                var dlat = this.transformlat(lng - 105.0, lat - 35.0)
                var dlng = this.transformlng(lng - 105.0, lat - 35.0)
                var radlat = lat / 180.0 * this.pi
                var magic = Math.sin(radlat)
                magic = 1 - this.ee * magic * magic
                var sqrtmagic = Math.sqrt(magic)
                dlat = (dlat * 180.0) / ((this.a * (1 - this.ee)) / (magic * sqrtmagic) * this.pi)
                dlng = (dlng * 180.0) / (this.a / sqrtmagic * Math.cos(radlat) * this.pi)
                var mglat = lat + dlat
                var mglng = lng + dlng
                return [mglng, mglat]
            }
        },
        outOfChina(lng, lat) {
            lat = +lat
            lng = +lng
            // 纬度3.86~53.55,经度73.66~135.05
            return !(lng > 73.66 && lng < 135.05 && lat > 3.86 && lat < 53.55)
        },
        transformlat(lng, lat) {
            var lat = +lat
            var lng = +lng
            var ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng))
            ret += (20.0 * Math.sin(6.0 * lng * this.pi) + 20.0 * Math.sin(2.0 * lng * this.pi)) * 2.0 / 3.0
            ret += (20.0 * Math.sin(lat * this.pi) + 40.0 * Math.sin(lat / 3.0 * this.pi)) * 2.0 / 3.0
            ret += (160.0 * Math.sin(lat / 12.0 * this.pi) + 320 * Math.sin(lat * this.pi / 30.0)) * 2.0 / 3.0
            return ret
        },
        transformlng(lng, lat) {
            var lat = +lat
            var lng = +lng
            let ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng))
            ret += (20.0 * Math.sin(6.0 * lng * this.pi) + 20.0 * Math.sin(2.0 * lng * this.pi)) * 2.0 / 3.0
            ret += (20.0 * Math.sin(lng * this.pi) + 40.0 * Math.sin(lng / 3.0 * this.pi)) * 2.0 / 3.0
            ret += (150.0 * Math.sin(lng / 12.0 * this.pi) + 300.0 * Math.sin(lng / 30.0 * this.pi)) * 2.0 / 3.0
            return ret
        }
    },
}
</script>
 
<style lang="less" scoped>
#container {
    width: 1150px;
    height: 800px;
}
</style>